<template>
  <div class="order">
    <Header title="订单"></Header>
    <div class="content">
      <van-tabs color="#ffc400">
        <van-tab :title="item" v-for="(item,index) in navData"
          :key="index">
           <div v-for="(item1,index) in store.state.orderListEnd" :key="index"
                v-if="item === '全部' && store.state.orderListEnd.length">
             <van-card :num="item1.num" :price="item1.price" :title="item1.title" :thumb="item1.pic">
             </van-card>
           </div>

          <div v-else>
            <Empty></Empty>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Footer from "@/components/Footer"
import Header from '@/components/Header'
import Empty from '@/components/Empty'
import {reactive, toRefs} from "vue";
import {useStore} from "vuex";
export default {
  name: "Order",
  components: {
    Header,
    Footer,
    Empty
  },
  setup() {
    const store = useStore()
    const data = reactive({
      navData: ['全部', '交易完成', '待付款', '待发货', '已发货']
    })

    return {...toRefs(data),store}
  }
}
</script>

<style lang="less" scoped>
.order {
  display: flex;
  flex-flow: column;
  height: 100%;

  .content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>